<template>
  <div class="address-box">
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:title>{{ title }}</template>
    </nav-bar>

    <van-address-edit
      :address-info="addressinfo"
      :area-list="areaList"
      show-postal
      :show-delete="type == 'edit'"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @change-detail="onChangeDetail"
      @delete="onDelete"
    />
  </div>
</template>

<script>
import NavBar from "components/common/NavBar.vue";
import {
  DeleteAddress,
  addaddress,
  getAddressDetail,
  Editaddress,
} from "../../../network/address";
import { useRoute, useRouter } from "vue-router";
import { toRefs, ref, reactive, computed } from "vue";
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
export default {
  components: { NavBar },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const searchResult = ref([]);

    const state = reactive({
      type: "add",
      addressid: "",
      addressinfo: {
        name: "",
        tel: "",
        province: "",
        city: "",
        county: "",
        addressDetail: "",
        areaCodeL: "110000",
        postalCode: "625400",
        isDefault: false,
      },
    });

    //标题
    const title = computed(() => {
      return state.type == "add" ? "新增地址" : "修改地址";
    });
    const { type, addressid } = route.query;
    state.type = type;
    state.addressid = addressid;

    const onSave = (content) => {
      const params = {
        name: content.name,
        phone: content.tel,
        province: content.province,
        city: content.city,
        county: content.county,
        address: content.addressDetail,
        is_default: content.isDefault ? 1 : 0,
      };
      if (state.type == "add") {
        addaddress(params);
      } else if (state.type == "edit") {
        Editaddress(state.addressid, params);
      }

      Toast("保存成功");
      setTimeout(() => {
        router.back();
      }, 1000);
    };

    if (state.type == "edit") {
      getAddressDetail(state.addressid).then((res) => {
        state.addressinfo.name = res.name;
        state.addressinfo.tel = res.phone;
        state.addressinfo.province = res.province;
        state.addressinfo.city = res.city;
        state.addressinfo.county = res.county;
        state.addressinfo.addressDetail = res.address;
        state.addressinfo.isDefault = !!res.is_default;
      });
    }

    const onChangeDetail = (val) => {
      return val;
    };
    const onDelete = () => {
      console.log(state.addressid);
      DeleteAddress(state.addressid);
      Toast("保存成功");
      setTimeout(() => {
        router.push({
          path: "/address",
        });
      }, 1000);
    };

    return {
      onDelete,
      title,
      onSave,
      areaList,
      searchResult,
      onChangeDetail,
      ...toRefs(state),
    };
  },
};
</script>

<style scoped>
.address-box {
  margin-top: 50px;
}

.van-button--danger {
  background-color: green !important;
}
</style>